import React, { useState } from 'react'
import { BarsOutlined } from '@ant-design/icons';
import { Button, Modal, Tabs } from 'antd';
import '../RcEngine/scss/RcFraud.scss'
import RcDataShow from './RcDataShow/RcDataShow'



export default function RcFraud() {
    // Tabs
    const { TabPane } = Tabs;

    const [visible, setVisible] = useState(false);

    const [confirmLoading, setConfirmLoading] = useState(false);
    const [modalText, setModalText] = useState('确认删除吗?');

    const showModal = () => {

        setVisible(true);
    };

    const handleOkAll = () => {
        setModalText('正在删除……');
        setConfirmLoading(true);
    };

    const handleCancel = () => {
        console.log('Clicked cancel button');
        setVisible(false);
    };

    // Tabs
    function callback(key) {
        console.log(key);
    }

    return (
        <div className='fraud'>
            <div className='fraud-header'>
                <div className='header-left'>
                    <BarsOutlined className='data-icon' />
                    <span>数据列表</span>
                </div>
                <div className='header-right'>
                    <Button className='reloadbtn' type="primary" onClick={showModal} >
                        添加模板
                    </Button>
                    <Modal
                        title="提示"
                        visible={visible}
                        onOk={handleOkAll}
                        confirmLoading={confirmLoading}
                        onCancel={handleCancel}
                    >
                        <p>{modalText}</p>
                    </Modal>
                </div>
            </div>

            <div>
                <Tabs onChange={callback} type="card">

                    <TabPane tab="异常绑卡策略" key="1">
                        <RcDataShow></RcDataShow>
                    </TabPane>
                    <TabPane tab="失信风险策略" key="2">
                        <RcDataShow></RcDataShow>
                    </TabPane>
                    <TabPane tab="异常贷款策略" key="3">
                        <RcDataShow></RcDataShow>
                    </TabPane>

                </Tabs>
            </div>
        </div>
    )
}
